<template>
  <div class="data">
    <div v-for='item in list' :key="item.id">
      <div class="name">{{item.channel_info.name}}</div>
      <ul v-for='item2 in item.list' :key='item2.id'>
        <li class="list-zi" v-if='!item2.teacher_name' @click="golessondetail(item2.id)">
          <div class="list-zi-top">
            {{item2.title}}

          </div>
          <div class="list-zi-content">
            <div><span></span>03月25日 18:00 ~ 03月31日</div>
            <div>共{{item2.total_periods}}课时</div>
          </div>
          <div class="list-imgUrl" v-for='item3 in item2.teachers_list' :key="item3.id">
            <img class="img" :src="item3.teacher_avatar" alt="">
            <span>{{item3.teacher_name}}</span>
          </div>
          <div class="list-foot">
            <span>{{item2.sales_num}}人已报名</span>
            <span>
              <span>{{item2.underlined_price}}</span>-
              <span>{{item2.price}}</span>
            </span>

          </div>
        </li>
        <!-- 下面两节 -->
        <li v-if='item2.teacher_name' class="list-zi2">
          <div><img class="img1" :src="item2.teacher_avatar" alt=""></div>
          <div class="div1">
            <span>{{item2.teacher_name}}</span><span>{{item2.level_name}}</span>
            <p>{{item2.introduction}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import { lesson } from "../api/index"
  export default {
    name: 'Data',
    data() {
      return {
        list: [],
      }
    },
    methods: {
      async pushlessons() {
        const res = await lesson()
        //  console.log(res)
        this.list = res.data;
        // console.log(this.list)

      },
      golessondetail(id){
        // alert("id是："+id)
          this.$router.push({
            name:"Lessondetail",
            query:{
              ID:id,
            }
          })
      }
    },
    mounted() {
      this.pushlessons();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .data {
    width: 95%;
    margin: 0 auto;
    margin-top: 90px;
  }
  .name {
    width: 100%;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
    padding: 0 5px;
    margin: 10px 0;
    box-sizing: border-box;
    border-left: 3px solid orange;
    display: flex;
    justify-content: space-between;
  }

  .list-zi {
    height: 150px;
    background: #fff;
    margin-bottom: 8px;
    display: flex;
    border-radius: 5px;
    padding: 5px 10px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
  }

  .list-zi-top {
    line-height: 50px;
    font-size: 16px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #efefef;
  }

  .list-zi-content {
    display: flex;
    justify-content: space-between;
  }
  ul li{
    margin-bottom: 20px;
  }

  .img {
    width: 15px;
    height: 15px;
    border-radius: 50%;
  }
  .list-foot {
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #efefef;
  }
  .list-zi2 {
    height: 60px;
    background: #fff;
    margin-bottom: 8px;
    display: flex;
    border-radius: 5px;
    padding: 5px 10px;
    align-items: center;
    box-sizing: border-box;

  }

  .img1 {
    width: 15px;
    height: 15px;
    border-radius: 50%;
  }

  .div1 {
    margin: 0 8px;
  }
</style>